<template>
  <div class="box">
    <SearchVue></SearchVue>
    <div class="content">
        <BannerVue></BannerVue>
        <NavBarVue></NavBarVue>
        <SecondsKillVue></SecondsKillVue>
        <ListVue></ListVue>
    </div>
    <FooterVue></FooterVue>
  </div>
</template>

<script>
 import SearchVue from '../components/Search.vue'
 import BannerVue  from '@/components/Homes/Banner.vue'
 import NavBarVue  from '@/components/Homes/NavBar.vue'
 import SecondsKillVue  from '@/components/Homes/SecondsKill.vue'
 import ListVue  from '@/components/Homes/List.vue'
 import FooterVue  from '@/components/Footer.vue'

export default {
   name:'Home',
   components:{
  SearchVue,BannerVue,NavBarVue,SecondsKillVue,ListVue,FooterVue
   }
}
</script>

<style scoped>
.box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
 .content{
  flex:1;
  overflow:auto;
 /* background-color:ghostwhite; */
 }
</style>